<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :label-width="70" :model="queryParams" class="search-form" inline>
        <Form-item label="標題" prop="title">
          <Input
            v-model="queryParams.params.title"
            clearable
            placeholder="請輸入title"
            style="width: 120px"
            type="text"
          />
        </Form-item>
        <Form-item label="博客内容" prop="title">
          <Input
            v-model="queryParams.params.content"
            clearable
            placeholder="請輸入title"
            style="width: 120px"
            type="text"
          />
        </Form-item>

        <Form-item label="發布日期" prop="createTime">
          <DatePicker v-model="queryParams.params.createTime" type="date"  placeholder="發布日期"
                      format="yyyy-MM-dd" clearable
                      style="width: 120px">
          </DatePicker>
        </Form-item>
        <span style="margin: 30px">
          <Button class="search-btn" icon="primary" type="primary" @click="handleSearch">搜索</Button>
        </span>

        <span style="margin: 10px">
           <Button class="search-btn" type="primary" @click="resetSearch">重置</Button>
        </span>

        <span style="margin: 10px">
          <Button class="search-btn" type="primary" @click="add">添加</Button>
        </span>

        <Table  class="mt_10" ref="table" :columns="columns" :data="data" :loading="loading" border></Table>


        <!-- 添加 -->
        <Modal
          v-model="viewFlag"
          :closable="false"
          :mask-closable="false"
          :title="viewTitle"
          :width="500">
          <Form ref="form" :label-width="100" :model="formData">
            <Form-item label="標題" prop="title">
              <Input
                v-model="formData.title"
                clearable
                placeholder="標題"
                style="width: 200px"
                type="text"
              />
            </Form-item>
            <Form-item label="內容" prop="content">
              <Input
                v-model="formData.content"
                clearable
                placeholder="內容"
                style="width: 200px"
                type="text"
              />
            </Form-item>
          </Form>
          <div slot="footer">
            <Button type="text" @click="cancel">取消</Button>
            <Button v-if="viewTitle==='添加'" type="primary" @click="addData">添加</Button>
            <Button v-if="viewTitle==='修改'" type="primary" @click="editData">修改</Button>
          </div>

        </Modal>


        <Row class="mt_10" justify="end" type="flex">
          <Page :current="queryParams.pageNumber" :page-size="queryParams.pageSize" :page-size-opts="[10, 20, 50]"
                :total="total"
                show-elevator show-sizer
                show-total size="small" @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </Row>
      </Form>
    </Card>
  </div>

</template>

<script>
import {list,add,edit,del,getById} from "@/api/blog";

export default {
  name: "blog-list",
  data() {
    return {
      loading: true, // 表單加载狀態
      viewFlag: false, //控制新增和修改窗口
      viewTitle: "", // 添加或编辑標題
      queryParams: {
        pageNumber: 1,
        pageSize: 10, // 頁面大小
        sortName: 'id',
        sortOrder: 'desc',
        params: {
          title: '',
          createTime: '',
          numberId: '',
          content:'',

        }
      },
      columns: [
        {
          title: "店鋪名稱",
          key: "storeName",
          width: 120,
          tooltip: true,
        },
        {
          title: "會員名稱",
          key: "numberName",
          width: 120,
          tooltip: true,
        },
        {
          title: "標題",
          key: "title",
          width: 80,
        },
        {
          title: "博客内容",
          key: "content",
          width: 170,
        },
        {
          title: "發表時間",
          key: "createTime",
          width: 130,
        },
        {
          title: "操作",
          key: "action",
          width: 220,
          align: "center",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              enableOrDisable,
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.del(params.row);
                    }
                  }
                },
                "删除"
              ),
            ]);
          }
        }
      ],
      data: [], // 表單數据
      total: 0, // 表單數据总數
      selectedShop: false, //用於是否選擇店铺
      formData: {},

    };
  },
  // 初始化數据
  mounted() {
    this.getDataList();
  },
  methods: {
    // 回调给父级
    callback(val) {
      this.$emit("callback", val);
    },
    // 分頁 改变頁碼
    changePage(pageNumber) {
      this.queryParams.pageNumber = pageNumber;
      this.getDataList();
    },
    // 分頁 改变頁數
    changePageSize(pageNumber) {
      this.queryParams.pageNumber = 1;
      this.queryParams.pageSize = pageNumber;
      this.getDataList();
    },
    // 搜索
    handleSearch() {
      this.queryParams.pageNumber = 1;
      this.queryParams.pageSize = 10;
      this.getDataList();
    },
    // 获取列表數据
    getDataList() {
      list(this.queryParams).then(res => {
        if (res.success) {
          this.data = res.result.records
          this.total = res.result.total;
        }
        //关闭加载狀態
        this.loading = false
      })
    },
    //重置搜索框
    resetSearch() {
      this.queryParams.params = {}
      this.getDataList();
    },
    resetForm() {
      this.formData = {};
    },
    //添加
    add(item) {
      this.viewTitle = "添加";
      this.viewFlag = true;
    },
    //修改
    edit(item) {
      this.viewTitle = "修改";
      this.viewFlag = true;
      //回显數据
      let id = {id: item.id}
      getById(id).then(res=>{
       this.formData =res.result
      })
    },
    //刪除
    del(item) {
      let id = {id: item.id}
      del(id).then(res => {
        if (res.code == 200) {
          this.$Message.success('删除成功');
        } else {
          this.$Message.success('删除失败');
        }
        this.getDataList();
        this.resetForm();
      });
    },
    addData() {
      add(this.formData).then(res => {
        if (res.code == 200) {
          this.$Message.success('添加成功');
        } else {
          this.$Message.success('添加失败');
        }
        this.getDataList();
        this.viewFlag = false;
      });
      this.resetForm();
    },
    editData() {
      editHostStore(this.formData).then(res => {
        this.getDataList();
        this.viewFlag = false;
      })
      this.resetForm();
    },
    cancel() {
      this.viewFlag = false;
      this.resetForm();
      this.getDataList();
    },
  }
};
</script>
